import { View } from "@tarojs/components";
import { AbstractButton, Icon } from "@/components";
import style from "./index.module.scss";
import { ActionNames, sendAction } from "@/utils/tracking";

export type BottomDockButtonShape = {
  text: string;
  cb: () => void;
  disabled?: boolean;
};

interface BottomDockProps {
  onPrimaryClick: BottomDockButtonShape;
  onSecondaryClick: BottomDockButtonShape | null;
  onSaveClick?: () => void;
  liked?: boolean;
  hex?: string;
}

const C13BottomDock = ({
  onSaveClick,
  onPrimaryClick,
  onSecondaryClick,
  liked = false,
  hex,
}: BottomDockProps) => {
  return (
    <View className={style["bottom-dock"]}>
      <View className={style.content}>
        <View className={style["icon-buttons-wrapper"]}>
          <AbstractButton
            openType="contact"
            variant="plain"
            className={style["icon-button"]}
            onClick={() => {
              sendAction(ActionNames.DetailCustomerServiceClick)
            }}
          >
            <Icon type="HelpDesk" className={style["help-desk"]} />
          </AbstractButton>
          {onSaveClick && (
            <AbstractButton variant="plain" onClick={onSaveClick}>
              <Icon
                type={liked ? "FavoriteFilled" : "Favorite"}
                className={style["favorite"]}
              />
            </AbstractButton>
          )}
        </View>
        <View className={style["cta-buttons-wrapper"]}>
          {onSecondaryClick && (
            <AbstractButton
              color="transparent"
              disabled={
                onSecondaryClick && onSecondaryClick.disabled ? true : false
              }
              onClick={onSecondaryClick.cb}
            >
              {onSecondaryClick.text}
            </AbstractButton>
          )}
          <AbstractButton
            color="dark"
            hex={hex}
            disabled={onPrimaryClick && onPrimaryClick.disabled ? true : false}
            onClick={onPrimaryClick && onPrimaryClick.cb}
          >
            {onPrimaryClick && onPrimaryClick.text}
          </AbstractButton>
        </View>
      </View>
    </View>
  );
};

export default C13BottomDock;
